<template>
	<view>
		<fu-custom bgColor="bg-white" :isBack="true">
			<block slot="content"><text class="text-title">{{ i18n['提现'] }}</text></block>
			<block slot="right">
				<!-- #ifndef MP-WEIXIN -->
				<view @tap="toLog" class="text-lg">{{ i18n['明细'] }}</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view></view>
				<!-- #endif -->
			</block>
		</fu-custom>
		<!-- 输入提现金额 start -->
		<view class="tx_cont margin-top-sm padding" :style="[{ top: CustomBar + 'px' }]">
			<view class="text-333 flex align-center justify-between">
				<view class="text-lg text-bold">输入提现数量</view>
				<!-- #ifdef MP-WEIXIN -->
				<view @tap="toLog" class="text-lg">{{ i18n['明细'] }}</view>
				<!-- #endif -->
			</view>
			<view class="tx_box padding-tb solid-bottom flex align-center justify-between">
				<view class="flex-sub flex align-center">
					<!-- <text class="fu-fs24 text-333" style="flex-shrink: 0;">积分</text> -->
					<input class="margin-left-sm" type="number" :placeholder="i18n['账户余额']+moeny" v-model="change_money"
						placeholder-style="font-size: 32rpx; color: #999999;" />
				</view>
				<view class="withAll" @click="total_tx">{{ i18n['全部'] }}</view>
			</view>
			<view class="tx_yue margin-top-sm">
				{{ i18n['提现收取']}}{{withdraw_handling_fee}}%{{ i18n['的手续费'] }}
				<text class="fu-iconfont tips margin-left-xs" @tap="showRole">&#xe8b0;</text>
			</view>
		</view>
		<!-- 输入提现金额 end -->

		<!-- 选择提现方式 start -->
		<view class="tx_main padding-lr padding-top">
			<view class="flex align-center justify-between">
				<text class="tx_choose text-333 text-bold">{{ i18n['请选择提现方式'] }}</text>
				<view class="" @click="handleJump" data-url="/pages/wallet/account-bind/index">
					<text class="">绑定账户</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="margin-top-xs">
				<!-- <view class="padding-tb flex align-center justify-between solid-bottom" @click="get_type"
					:data-index="2">
					<view class="flex align-center">
						<image class="ali-img margin-right-sm" :src="imgWechatUrl+'/wallet/alipay.png'" mode=""></image>
						<view class="text-df">{{ i18n['支付宝'] }}</view>
					</view>
					<image class="check-img" v-if="tabCurrentIndex == 2" :src="imgWechatUrl+'/wallet/checked.png'"
						mode=""></image>
					<image class="check-img" v-else :src="imgWechatUrl+'/wallet/unchecked.png'" mode=""></image>
				</view>
				<view class="padding-tb flex align-center justify-between solid-bottom" @click="get_type"
					:data-index="1">
					<view class="flex align-center">
						<image class="ali-img margin-right-sm" :src="imgWechatUrl+'/wallet/wechatpay.png'" mode="">
						</image>
						<view class="text-df">{{ i18n['微信'] }}</view>
					</view>
					<image class="check-img" v-if="tabCurrentIndex == 1" :src="imgWechatUrl+'/wallet/checked.png'"
						mode=""></image>
					<image class="check-img" v-else :src="imgWechatUrl+'/wallet/unchecked.png'" mode=""></image>
				</view> -->

				<view class="padding-tb flex align-center justify-between" @click="get_type" :data-index="3">
					<view class="flex align-center">
						<image class="ali-img margin-right-sm" src="../static/ye.png" mode=""></image>
						<view class="text-df">{{ i18n['银行卡'] }}</view>
					</view>
					<image class="check-img" v-if="tabCurrentIndex == 3" :src="imgWechatUrl+'/wallet/checked.png'" mode=""></image>
					<image class="check-img" v-else :src="imgWechatUrl+'/wallet/unchecked.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 选择提现方式 end -->

		<!-- 立即体现按钮 -->
		<view class="tx_btn" @click="handleSubmit">{{ i18n['提现'] }}</view>
		<!-- 弹窗  -->
		<fu-popup v-model="showPopup" mode="center" width="540rpx" height="600rpx">
			<view class="pop-content padding">
				<view class="text-333 text-bold text-lg text-center">{{ i18n['提现规则'] }}</view>
				<view v-for="(item, index) in fast_detaile" :key="index" class="margin-top-sm text-999">{{ index + 1 }}
					, {{ item.content }}</view>
			</view>
			<view class="padding-top flex align-center justify-center " @tap="closePop">
				<view class="round close-btn flex align-center justify-center"><text class="cuIcon-close text-lg"
						style="color: #838383;margin-top:4rpx;"></text></view>
			</view>
		</fu-popup>
		<!-- 输入支付密码 -->
		<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
		<!-- 断网检测 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	/**
	 * @author 刘畅
	 */
	// @see 引入支付密码组件
	import payKeyboard from '../components/keyboard/keyboard.vue';
	export default {
		components: {
			payKeyboard
		},
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				withdraw_handling_fee: '', //提现手续费
				CustomBar: this.CustomBar,
				tabCurrentIndex: 3, // {Number} 支付宝还是微信
				moeny: '', // {String} 账户余额
				account_name: '', // {Number} 没啥用，不敢删
				account: '', // {String} 没啥用，不敢删
				change_money: '', // {String} 用户输入的提现金额
				is_click: false, // {Boolean} 按钮的点击状态
				show_key: false, // {Boolean} 支付密码组件是否显示
				min: 1, // {Number} 最小提现金额
				showPopup: false, // {Boolean} 弹窗显示
				fast_detaile: [] // {Object}
			};
		},
		onLoad(options) {
			this.getMoney();
			this.getLimitWithdraw();
		},

		methods: {
			/**
			 * @function
			 * @description 支付密码弹窗隐藏
			 */
			hideFun() {
				this.show_key = false;
			},
			/**
			 * @function
			 * @description 判断用户是否设置支付密码
			 * @property {Number} pay_money - 订单金额
			 */
			isSetPayPassword() {
				return new Promise(resolve => {
					this.$api.post(global.apiUrls.isSetPay).then(res => {
						res = res.data;
						console.log('是否设置支付密码', res);
						if (res.code == 1) {
							if (res.data.falg == 0) {
								setTimeout(() => {
									this.$urouter.navigateTo(
										'/pages/index/setting/change-pay-password/index');
								}, 800);
								resolve(false);
							} else {
								resolve(true);
							}
						} else {
							this.$message.info(res.msg);
							resolve(false);
						}
					});
				});
			},
			filter(type) {
				switch (type) {
					case 1:
						return this.i18n['请先绑定微信'];
					case 2:
						return this.i18n['请先绑定支付宝'];
					case 3:
						return this.i18n['请先绑定银行卡'];
				}
			},
			// 判断用户是否绑定了提现账户
			isBindAccount() {
				return new Promise(resolve => {
					this.$api
						.get(global.apiUrls.getWithdrawAccount, {
							account_type: this.tabCurrentIndex
						})
						.then(res => {
							res = res.data;
							console.log('是否绑定了提现账号', res);
							if (res.code == 0) {
								console.log('未绑定');
								this.$message.info(this.filter(this.tabCurrentIndex));
								let urls = '';
								if (this.tabCurrentIndex == 1) {
									urls = '/pages/wallet/wechat-bind/index';
								}
								if (this.tabCurrentIndex == 2) {
									urls = '/pages/wallet/alipay-bind/index';
								}
								if (this.tabCurrentIndex == 3) {
									urls = '/pages/wallet/card-bind/index';
								}
								setTimeout(() => {
									this.$urouter.navigateTo({
										url: urls,
										params: {
											id: 1
										}
									});
								}, 800);
								resolve(false);
							} else {
								resolve(true);
							}
						});
				});
			},
			/**
			 * @event
			 * @description 判断用户是否绑定体现账户,如果绑定就去体现
			 * @param {Object} n - 用户输入的支付密码
			 * @property {Number} account_type - 【账户类型 1 微信 2 支付宝 3 银行卡】
			 * @property {Number} type - 【提现类型 1：微信 2：支付宝】
			 * @property {Number} money - 【提现金额】
			 * @property {Number} pay_password - 支付密码
			 */
			getPassword(n) {
				this.$api
					.post(global.apiUrls.withdraw, {
						type: this.tabCurrentIndex,
						money: this.change_money,
						pay_password: n.password
					})
					.then(res => {
						res = res.data;
						if (res.code == 1) {
							uni.$emit('changeMoney', {
								msg: this.i18n['页面更新']
							});
							this.$urouter.redirectTo({
								url: '/pages/wallet/withdraw-success/index',
								params: {
									type: this.filterName(this.tabCurrentIndex),
									money: this.change_money
								}
							});
						} else {
							this.$message.info(res.msg);
						}
					})
					.catch(err => {
						console.log('ERROR', err);
					});
			},
			filterName(type) {
				switch (type) {
					case 1:
						return this.i18n['微信'];
					case 2:
						return this.i18n['支付宝'];
					case 3:
						return this.i18n['银行卡'];
				}
			},
			/**
			 * @function
			 * @description 开启支付密码组件
			 */
			showModal() {
				this.show_key = true;
			},
			/**
			 * @event
			 * @description 全部提现
			 */
			total_tx() {
				if (parseFloat(this.moeny) <= 0) {
					this.$message.info(this.i18n['没有可提现的金额']);
				} else if (parseFloat(this.moeny) < parseFloat(this.min)) {
					this.$message.info(this.i18n['当前余额低于最低提现金额限制']);
				} else {
					this.change_money = this.moeny;
				}
			},
			/**
			 * @event
			 * @description 用户选择提现到支付宝还是微信
			 */
			get_type(e) {
				this.tabCurrentIndex = e.currentTarget.dataset.index;
			},
			/**
			 * @function
			 * @description 获取用户余额
			 */
			getMoney() {
				let _this = this;
				_this.$api
					.get(global.apiUrls.getMyMoney, {})
					.then(res => {
						console.log(res, 'get_my_money');
						if (res.data.code == 1) {
							_this.moeny = res.data.data.money;
							_this.withdraw_handling_fee = res.data.data.withdraw_handling_fee
						}
					})
					.catch(err => {
						console.log(err, 'get_my_money');
					});
			},
			/**
			 * @function
			 * @description 获取最小提现金额限制
			 */
			getLimitWithdraw() {
				this.$api
					.post(global.apiUrls.postLimitWithdraw, {
						code: 'user.min_withdraw_money'
					})
					.then(res => {
						if (res.data.code == 1) {
							this.min = res.data.data;
						}
					})
					.catch(err => {});
			},
			/**
			 * @event
			 * @description 点击立即体现按钮
			 * 先判断是否绑定了对应账号
			 * 再判断是否设置了支付密码
			 * 再提现
			 */
			async handleSubmit() {
				let isBindAccount = await this.isBindAccount();
				if (!isBindAccount) return;
				console.log('绑定了账号,下一步');
				let isSetPayPassword = await this.isSetPayPassword();
				if (!isSetPayPassword) return;
				console.log('设置了支付密码,下一步');
				if (!this.change_money) {
					this.$message.info(this.i18n['请输入提现金额']);
					return false;
				}
				if (Number(this.change_money) < Number(this.min)) {
					this.$message.info(this.i18n['最小提现金额为'] + this.min + this.i18n['元']);
					return false;
				}
				if (Number(this.change_money) > Number(this.moeny)) {
					this.$message.info(this.i18n['可提现余额不足']);
					return false;
				}
				this.showModal();
			},
			showRole() {
				let _this = this;
				_this.$api
					.post(global.apiUrls.getWithdrawRule)
					.then(res => {
						if (res.data.code == 1) {
							_this.fast_detaile = res.data.data;
							this.showPopup = true;
						}
					})
					.catch(err => {
						console.log(err, 'get_my_money');
					});
			},
			closePop() {
				this.showPopup = false;
			},
			toLog() {
				this.$urouter.navigateTo('/pages/wallet/withdraw-detail/index');
			}
		}
	};
</script>

<style lang="scss">
	.uni-input-placeholder {
		color: #999;
	}

	.text-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	// 体现按钮 start
	.tx_btn {
		width: calc(100% - 60upx);
		height: 88upx;
		background: $bgtheme;
		border-radius: 44upx;
		font-size: 32upx;
		color: white;
		line-height: 88upx;
		text-align: center;
		position: fixed;
		bottom: 60upx;
		left: 30upx;
	}

	// 提现按钮 end

	// 选择提现方式 start
	.tx_main {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;
		margin-top: 20upx;

		.tx_choose {
			font-size: 32rpx;
		}

		.ali-img {
			width: 52rpx;
			height: 52rpx;
		}

		.check-img {
			width: 36rpx;
			height: 36rpx;
		}

		.payMain {
			margin: 16px 0;
			display: flex;
			justify-content: space-between;
		}

		.tx_mainBox {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 46%;
			height: auto;
			overflow: hidden;
			border-radius: 10rpx;
			border: 1px solid #999;

			.tx_name {
				display: block;
				line-height: 100upx;
				font-size: 30upx;
				color: #333;
				text-align: center;
			}

			&.act {
				border: 1px solid $theme;
			}

			image {
				width: 50upx;
				height: 50upx;
				margin-right: 20upx;
			}
		}

		.act .icon-yuanquan:before {
			content: '\E655';
			color: $theme;
		}
	}

	.tx_final {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 0 30upx;

		text {
			display: block;
			margin-top: 24upx;
			font-size: 24upx;
			color: #999999;

			text {
				color: $theme;
				display: inline-block;
				margin-left: 6upx;
			}
		}
	}

	// 选择提现方式 end

	// 输入体现金额 start
	.tx_cont {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;

		.tx_box {
			width: 100%;
			height: auto;
			overflow: hidden;
			position: relative;

			.f56 {
				font-size: 56rpx;
				font-weight: Regular;
			}

			.withAll {
				font-size: 32rpx;
				color: $theme;
				font-weight: Medium;
			}

			input {
				display: block;
				width: auto;
				height: 70upx;
				font-size: 50upx;
				line-height: 70upx;
			}
		}

		.tx_yue {
			font-size: 24upx;
			color: #999999;

			.tips {
				font-size: 26rpx;
			}
		}
	}

	// 输入体现金额 end
	// 规则弹窗 start
	.pop-content {
		width: 540rpx;
		height: 472rpx;
		border-radius: 24rpx;
		background: #ffffff;
	}

	.close-btn {
		width: 54rpx;
		height: 54rpx;
		background-color: rgba(255, 255, 255, 0.6);
	}

	// 规则弹窗 end
</style>